<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" v-loading="loading">
        <!-- 搜索栏 -->
        <el-form
          :inline="true"
          :model="pagination"
          ref="pagination"
        >
          <el-form-item label="主体简称：" prop="simpleName">
            <el-input v-model="pagination.simpleName" placeholder="请输入主体简称" ></el-input>
          </el-form-item>
          <el-form-item label="主体编码：" prop="code">
            <el-input v-model="pagination.code" placeholder="请输入主体编码" ></el-input>
          </el-form-item>
          <el-form-item label="所属区域：" prop="prov">
            <el-select
              v-model="prov"
              placeholder="请选择省"
              class="selectinputW"
            >
              <el-option
                v-for="(item,index) in arr"
                :key="index"
                :label="item.name"
                :value="item.name"
              >{{item.name}}</el-option>
            </el-select>
            <el-select v-model="city" placeholder="请选择市" class="selectinputW">
              <el-option
                v-for="(item,index) in cityArr"
                :key="index"
                :label="item.name"
                :value="item.name"
              >{{item.name}}</el-option>
            </el-select>
            <el-select v-model="district" placeholder="请选择区" class="selectinputW">
              <el-option
                v-for="(item,index) in districtArr"
                :key="index"
                :label="item.name"
                :value="item.name"
              >{{item.name}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主体类型：" prop="status">
            <el-select v-model="pagination.type" placeholder="请选择">
              <el-option label="全部" value="" ></el-option>
              <el-option label="汽修厂" value="1" ></el-option>
              <el-option label="配件商" value="2" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select v-model="pagination.status" placeholder="请选择">
              <el-option label="全部" value="" ></el-option>
              <el-option label="正常" value="1" ></el-option>
              <el-option label="锁定" value="2" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleRest">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 搜索栏 / -->
        <div class="btnBox" style="text-align:right">
<!--          <el-button type="primary" @click="() => $router.push(`/mainbody/serverAdd`)">新增服务商</el-button>-->
        </div>
        <!-- 数据表格 -->
        <el-table
          :data="items"
          border
          style="width: 100%; margin-top:10px;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" prop="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="code" label="主体编码"></el-table-column>
          <el-table-column prop="simpleName" label="主体简称"></el-table-column>
          <el-table-column prop="isChain" label="所在区域">
            <template slot-scope="scope">
              <span>{{`${scope.row.province}${scope.row.city}${scope.row.county}`}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isChain" label="主体类型">
            <template slot-scope="scope">
              <span>{{scope.row.type === 1 ? '汽修厂' : '配件商'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isChain" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.status === 1 ? '正常' : '锁定'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.hasEmployee" @click="handleAdd(scope.row)" type="text" size="small">创建管理员</el-button>
              <el-button v-else @click="() => $router.push({path: '/mainbody/storeUserList', query: {id: scope.row.id}})" type="text" size="small">查看用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
        ></el-pagination>
        <!-- 数据表格 / -->
      </el-card>
      <!-- 新增标签弹层 -->
      <Dialog ref="addType" :dialogTitle="dialogTitle" :storeData = storeData v-on:newDataes = subMitForm></Dialog>
    </div>
  </div>
</template>

<script>
  import { getList, getDetails, delData, updateData } from '@/api/store'
  import cityApi from '@/api/base/city'
  import Dialog from './../components/storeAdd'
  export default {
    name: 'storeList',
    components: {
      Dialog
    },
    data() {
      return {
        items: [{}],
        total: 20,
        prov: '',
        city: '',
        district: '',
        storeData: {},
        pagination: {
          page: 1,
          pageSize: 10,
          simpleName: '',
          code: '',
          province: '',
          city: '',
          type: '',
          county: '',
          isChain: '',
          status: ''
        },
        cityArr: [],
        arr: cityApi.arrAll,
        districtArr: [],
        loading: false,
        multipleSelection: [],
        dialogVisible: false,
        dialogTitle: ''
      }
    },
    created() {
      this.doQuery({})
    },
    methods: {
      // 业务方法
      async doQuery(parent) {
        this.loading = true
        // this.items = []
        await getList({...parent})
          .then(res => {
            const { data } = res
            this.items = data.items
            this.total = data.counts
            this.loading = false
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
      },
      // UI方法 - 重置
      handleRest() {
        this.prov = ''
        this.city = ''
        this.district = ''
        this.pagination.type = ''
        this.$refs['pagination'].resetFields()
      },
      // 搜索
      handleSearch() {
        this.doQuery(this.pagination)
      },
      //
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      // 每页条数
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.pagination.pageSize = val
        this.doQuery(this.pagination)
      },
      // 当前页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.pagination.page = val
        this.doQuery(this.pagination)
      },
      // 添加
      handleAdd(val) {
        this.storeData = val
        this.dialogTitle = '添加管理员'
        this.$refs.addType.dialogFormV()
      },
      // 详情获取  - 如果有详情接口 读详情
      async getDetails(id) {
        let dataes = {}
        await getDetails(id)
          .then(res => {
            const { data } = res
            this.loading = false
            dataes = data
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
        return dataes
      },
      // 编辑
      async handleEdit (val) {
        this.dialogTitle = '编辑'
        // 如果有详情接口 读详情
        this.$router.push({path: `/mainbody/serverAdd`, query: {id: val.id}})
      },
      // 删除
      handleDelect(item) {
        const title = item.status === 1 ? '是否确认锁定？' : '是否确认解锁？'
        this.$confirm(title)
          .then(async ret => {
            await updateData({id: item.id, status: item.status === 1 ? 2 : 1})
              .then(res => {
                this.loading = false
                this.$message.success(item.status === 1 ? '锁定成功？' : '解锁成功？')
                this.doQuery()
              })
              .catch(err => {
                console.log(err)
                this.loading = false
              })
          })
          .catch(ret => {
            console.log(ret)
          })
      },
      // subMitForm
      subMitForm(val) {
        if (val.id) {
          this.$message.success('修改成功')
        } else {
          this.$message.success('添加成功')
        }
        this.doQuery(this.pagination)
      },
      updateCity: function() {
        for (let i in this.arr) {
          let obj = this.arr[i]
          console.log(obj)
          if (obj.name === this.prov) {
            this.cityArr = obj.sub
            break
          } else {
            this.cityArr = []
          }
        }
        this.city = this.cityArr && this.cityArr.length > 1 ? this.cityArr[1].name : ''
      },
      updateDistrict: function() {
        if (!this.city) {
          this.district = ''
          return
        }
        for (let i in this.cityArr) {
          let obj = this.cityArr[i]
          if (obj.name === this.city) {
            this.districtArr = obj.sub
            break
          } else {
            this.districtArr = []
          }
        }
        if (
          this.districtArr &&
          this.districtArr.length > 0 &&
          this.districtArr[1].name
        ) {
          this.district = this.districtArr[1].name
        } else {
          this.district = ''
        }
      }
    },
    watch: {
      prov: function() {
        this.updateCity()
        this.updateDistrict()
        this.pagination.province = this.prov
      },
      city: function() {
        this.updateDistrict()
        this.pagination.city = this.city
      },
      district: function() {
        this.pagination.county = this.district
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .alert {
    margin: 10px 0px 0px 0px;
  }
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
</style>
